---
title: Module
sort: 7
contributors:
  - sokra
  - skipjack
  - jouni-kantola
  - jhnns
  - dylanonelson
  - byzyk
  - pnevares
  - fadysamirsadek
  - nerdkid93
  - EugeneHlushko
  - superburrito
  - lukasgeiter
  - skovy
  - smelukov
  - opl-
  - Mistyyyy
  - anshumanv
  - chenxsan
  - snitin315
  - vabushkevich
  - ahabhgk
  - hai-x
---

These options determine how the [different types of modules](/concepts/modules) within a project will be treated.

## module.defaultRules

An array of rules applied by default for modules.

See [source code](https://github.com/webpack/webpack/blob/dc4d97429b2013f7770ba785721b65cf82c2ef04/lib/config/defaults.js#L608) for details.

```js
module.exports = {
  module: {
    defaultRules: [
      '...', // you can use "..." to reference those rules applied by webpack by default
    ],
  },
};
```

Starting with webpack 5.87.0, falsy values including `0`, `""`, `false`, `null` and `undefined` are allowed to pass to `module.defaultRules` to conditionally disable specific rules.

```js
module.exports = {
  module: {
    defaultRules: [
      false &&
        {
          // this rule will be disabled
        },
    ],
  },
};
```

## module.generator

<Badge text="5.12.0+" />

It's possible to configure all generators' options in one place with a `module.generator`.

**webpack.config.js**

```js
module.exports = {
  module: {
    generator: {
      asset: {
        // Generator options for asset modules

        // Indicates if this asset should be treated as binary. Set to 'false' to handle it as text instead. Available since webpack 5.93.0
        binary: false,

        // The options for data url generator.
        dataUrl: {
          // Asset encoding (defaults to "base64")
          // type: 'base64' | false
          encoding: 'base64',
          // Asset mimetype (getting from file extension by default).
          // type: string
          mimetype: 'image/png',
        },

        // Emit an output asset from this asset module. This can be set to 'false' to omit emitting e. g. for SSR.
        // type: boolean
        emit: true,

        // Customize filename for this asset module
        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
        filename: 'static/[path][name][ext]',

        // Customize publicPath for asset modules, available since webpack 5.28.0
        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
        publicPath: 'https://cdn/assets/',

        // Emit the asset in the specified folder relative to 'output.path', available since webpack 5.67.0
        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
        outputPath: 'cdn-assets/',
      },
      'asset/inline': {
        // Generator options for asset/inline modules

        // Indicates if this asset should be treated as binary. Set to 'false' to handle it as text instead. Available since webpack 5.93.0
        binary: false,

        // The options for data url generator.
        dataUrl: {
          // Asset encoding (defaults to "base64")
          // type: 'base64' | false
          encoding: 'base64',
          // Asset mimetype (getting from file extension by default).
          // type: string
          mimetype: 'image/png',
        },
      },
      'asset/resource': {
        // Generator options for asset/resource modules

        // Indicates if this asset should be treated as binary. Set to 'false' to handle it as text instead. Available since webpack 5.93.0
        binary: false,

        // Emit an output asset from this asset module. This can be set to 'false' to omit emitting e. g. for SSR.
        // type: boolean
        emit: true,

        // Customize filename for this asset module
        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
        filename: 'static/[path][name][ext]',

        // Customize publicPath for asset/resource modules, available since webpack 5.28.0
        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
        publicPath: 'https://cdn/assets/',

        // Emit the asset in the specified folder relative to 'output.path', available since webpack 5.67.0
        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
        outputPath: 'cdn-assets/',
      },
      'asset/bytes': {
        // No generator options are supported for this module type yet
      }
      javascript: {
        // No generator options are supported for this module type yet
      },
      'javascript/auto': {
        // ditto
      },
      'javascript/dynamic': {
        // ditto
      },
      'javascript/esm': {
        // ditto
      },
      css: {
        // Generator options for css modules

        // Avoid generating and loading a stylesheet and only embed exports from css into output javascript files.
        // type: boolean, available since webpack 5.90.0
        exportsOnly: true,

        // Customize how css export names are exported to javascript modules, such as keeping them as is, transforming them to camel case, etc.
        // type: 'as-is' | 'camel-case' | 'camel-case-only' | 'dashes' | 'dashes-only' | ((name: string) => string)
        // available since webpack 5.90.4
        exportsConvention: 'camel-case-only',
      },
      'css/auto': {
        // Generator options for css/auto modules

        // Avoid generating and loading a stylesheet and only embed exports from css into output javascript files.
        // type: boolean, available since webpack 5.90.0
        exportsOnly: true,

        // Customize how css export names are exported to javascript modules, such as keeping them as is, transforming them to camel case, etc.
        // type: 'as-is' | 'camel-case' | 'camel-case-only' | 'dashes' | 'dashes-only' | ((name: string) => string)
        // available since webpack 5.90.4
        exportsConvention: 'camel-case-only',

        // Customize the format of the local class names generated for css modules.
        // type: string, besides the substitutions at File-level and Module-level in https://webpack.js.org/configuration/output/#template-strings, also include [uniqueName] and [local].
        // available since webpack 5.90.4
        localIdentName: '[uniqueName]-[id]-[local]',
      },
      'css/global': {
        // ditto
      },
      'css/module': {
        // ditto
      },
      json: {
        // Generator options for json modules
        // Use `JSON.parse` when the JSON string is longer than 20 characters.
        JSONParse: true,
      },
      // others…
    },
  },
};
```

## module.parser

<Badge text="5.12.0+" />

Similar to the [`module.generator`](#modulegenerator), you can configure all parsers' options in one place with a `module.parser`.

**webpack.config.js**

```js
module.exports = {
  module: {
    parser: {
      asset: {
        // Parser options for asset modules

        // The options for data url generator.
        dataUrl: {
          // Asset encoding (defaults to "base64")
          // type: 'base64' | false
          encoding: 'base64',
          // Asset mimetype (getting from file extension by default).
          // type: string
          mimetype: 'image/png',
        },

        // Emit an output asset from this asset module. This can be set to 'false' to omit emitting e. g. for SSR.
        // type: boolean
        emit: true,

        // Customize filename for this asset module
        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
        filename: 'static/[path][name][ext]',

        // Customize publicPath for asset modules, available since webpack 5.28.0
        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
        publicPath: 'https://cdn/assets/',

        // Emit the asset in the specified folder relative to 'output.path', available since webpack 5.67.0
        // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
        outputPath: 'cdn-assets/',
      },
      'asset/inline': {
        // No parser options are supported for this module type yet
      },
      'asset/resource': {
        // ditto
      },
      'asset/source': {
        // ditto
      },
      'asset/bytes': {
        // ditto
      },
      javascript: {
        // Parser options for javascript modules
        // e.g, enable parsing of require.ensure syntax
        requireEnsure: true,
        // Set the module to `'strict'` or `'non-strict'` mode. This can affect the module's behavior, as some behaviors differ between strict and non-strict modes.
        overrideStrict: 'non-strict',
      },
      'javascript/auto': {
        // ditto
      },
      'javascript/dynamic': {
        // ditto
      },
      'javascript/esm': {
        // ditto
      },
      css: {
        // Parser options for css modules

        // Enable/disable `@import` at-rules handling, available since webpack 5.97.0
        // type: boolean
        import: true,
        // Enable/disable url()/image-set()/src()/image() functions handling, available since webpack 5.97.0
        // type: boolean
        url: true,
        // Use ES modules named export for css exports, available since webpack 5.90.0
        // type: boolean
        namedExports: true,
        // Configure how CSS content is exported
        // type: string
        exportType: 'link',
      },
      'css/auto': {
        // ditto
      },
      'css/global': {
        // ditto
      },
      'css/module': {
        // ditto
      },
      // others…
    },
  },
};
```

### module.parser.css

Configure options for the CSS parser.

```js
module.exports = {
  module: {
    parser: {
      css: {
        // ...
        namedExports: true,
      },
    },
  },
};
```

#### module.parser.css.import

This option enables the handling of `@import` at-rules in CSS files. When set to `true`, `@import` statements are processed, allowing modular inclusion of styles from other CSS files.

- Type: `boolean`
- Available: 5.97.0+
- Example:

  ```js
  module.exports = {
    module: {
      parser: {
        css: {
          import: true,
        },
      },
    },
  };
  ```

  ```css
  /* reset-styles.css */
  body {
    margin: 0;
    padding: 0;
  }
  ```

  ```css
  /* styles.css */
  @import './reset-styles.css';

  body {
    background-color: red;
  }
  ```

T> To filter specific imports, you can use Webpack's built-in [IgnorePlugin](/plugins/ignore-plugin/). The [`filter` option](/loaders/css-loader/#filter), as available in `css-loader`, is not supported.

#### module.parser.css.url

This option enables or disables the handling of URLs in functions such as `url()`, `image-set()`, `src()`, and `image()` within CSS files. When enabled, these URLs are resolved and processed by webpack.

- Type: `boolean`
- Available: 5.97.0+
- Example:

  ```js
  module.exports = {
    module: {
      parser: {
        css: {
          url: true,
        },
      },
    },
  };
  ```

  ```css
  /* styles.css */
  .background {
    background-image: url('./images/bg.jpg');
  }

  .icon {
    content: image('./icons/star.svg');
  }
  ```

T> To filter specific imports, you can use Webpack's built-in [IgnorePlugin](/plugins/ignore-plugin/). The [`filter` option](/loaders/css-loader/#filter), as available in `css-loader`, is not supported.

#### module.parser.css.namedExports

This option enables the use of ES modules named export for CSS exports. When set to `true`, the CSS module will export its classes and styles using named exports.

- Type: `boolean`
- Available: 5.90.0+
- Example:

  ```js
  module.exports = {
    module: {
      parser: {
        css: {
          namedExports: true,
        },
      },
    },
  };
  ```

When `namedExports` is `false` for CSS modules, you can retrieve CSS classes using various import methods.
Named exports are redirected to improve developer experience (DX), facilitating a smooth transition from default exports to named exports:

```js
import * as styles from './styles.module.css';
import styles1 from './styles.module.css';
import { foo } from './styles.module.css';

console.log(styles.default.foo); // Access via styles.default
console.log(styles.foo); // Access directly from styles
console.log(styles1.foo); // Access via default import styles1
console.log(foo); // Direct named import
```

When `namedExports` is enabled (default behavior), you can use **only** named exports to import CSS classes.

```css
/* styles.css */
.header {
  color: blue;
}

.footer {
  color: green;
}
```

```js
import { header, footer } from './styles.module.css';
```

By enabling `namedExports`, you adopt a more modular and maintainable approach to managing CSS in JavaScript projects, leveraging ES module syntax for clearer and more explicit imports.

### module.parser.css.exportType

Configure how CSS content will be exported.

- Type: `boolean`
- Available: 5.102.0+
- Example:

  ```js
  module.exports = {
    module: {
      parser: {
        css: {
          // ...
          exportType: 'text',
        },
      },
    },
  };
  ```

Possible values: `'link' | 'text' | 'css-style-sheet'

- `link` - extract CSS into own file and use `link` tags to inject into DOM.
- `text` - store CSS in JS file and return using default export.
- `css-style-sheet` - the default export is a constructable stylesheet (i.e. CSSStyleSheet). Useful for custom elements and shadow DOM.

### module.parser.javascript

Configure options for JavaScript parser.

```js
module.exports = {
  module: {
    parser: {
      javascript: {
        // ...
        commonjsMagicComments: true,
      },
    },
  },
};
```

It's allowed to configure those options in [`Rule.parser`](/configuration/module/#ruleparser) as well to target specific modules.

#### module.parser.javascript.commonjsMagicComments

Enable [magic comments](/api/module-methods/#magic-comments) support for CommonJS.

- Type: `boolean`
- Available: 5.17.0+
- Example:

  ```js
  module.exports = {
    module: {
      parser: {
        javascript: {
          commonjsMagicComments: true,
        },
      },
    },
  };
  ```

Note that only `webpackIgnore` comment is supported at the moment:

```js
const x = require(/* webpackIgnore: true */ 'x');
```

#### module.parser.javascript.dynamicImportFetchPriority

Specify the global [fetchPriority](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/fetchPriority) for dynamic import.

- Type: `'low' | 'high' | 'auto' | false`
- Available: 5.87.0+
- Example:

  ```js
  module.exports = {
    module: {
      parser: {
        javascript: {
          dynamicImportFetchPriority: 'high',
        },
      },
    },
  };
  ```

#### module.parser.javascript.dynamicImportMode

Specifies global mode for dynamic import.

- Type: `'eager' | 'weak' | 'lazy' | 'lazy-once'`
- Available: 5.73.0+
- Example:

  ```js
  module.exports = {
    module: {
      parser: {
        javascript: {
          dynamicImportMode: 'lazy',
        },
      },
    },
  };
  ```

#### module.parser.javascript.dynamicImportPrefetch

Specifies global prefetch for dynamic import.

- Type: `number | boolean`
- Available: 5.73.0+
- Example:

  ```js
  module.exports = {
    module: {
      parser: {
        javascript: {
          dynamicImportPrefetch: false,
        },
      },
    },
  };
  ```

#### module.parser.javascript.dynamicImportPreload

Specifies global preload for dynamic import.

- Type: `number | boolean`
- Available: 5.73.0+
- Example:

  ```js
  module.exports = {
    module: {
      parser: {
        javascript: {
          dynamicImportPreload: false,
        },
      },
    },
  };
  ```

#### module.parser.javascript.exportsPresence

Specifies the behavior of invalid export names in `\"import ... from ...\"` and `\"export ... from ...\"`.

- Type: `'error' | 'warn' | 'auto' | false`
- Available: 5.62.0+
- Example:

  ```js
  module.exports = {
    module: {
      parser: {
        javascript: {
          exportsPresence: 'error',
        },
      },
    },
  };
  ```

#### module.parser.javascript.importExportsPresence

Specifies the behavior of invalid export names in `\"import ... from ...\"`.

- Type: `'error' | 'warn' | 'auto' | false`
- Available: 5.62.0+
- Example:

  ```js
  module.exports = {
    module: {
      parser: {
        javascript: {
          importExportsPresence: 'error',
        },
      },
    },
  };
  ```

#### module.parser.javascript.importMeta

Enable or disable evaluating `import.meta`.

- Type: `boolean = true`
- Available: 5.68.0+
- Example:

  ```js
  module.exports = {
    module: {
      parser: {
        javascript: {
          importMeta: false,
        },
      },
    },
  };
  ```

#### module.parser.javascript.importMetaContext

Enable/disable evaluating [`import.meta.webpackContext`](/api/module-variables/#importmetawebpackcontext).

- Type: `boolean`
- Available: 5.70.0+
- Example:

  ```js
  module.exports = {
    module: {
      parser: {
        javascript: {
          importMetaContext: true,
        },
      },
    },
  };
  ```

#### module.parser.javascript.overrideStrict

Set the module to `'strict'` or `'non-strict'` mode. This can affect the module's behavior, as some behaviors differ between strict and non-strict modes.

- Type: `'strict' | 'non-strict'`
- Available: 5.93.0+
- Example:

  ```js
  module.exports = {
    module: {
      parser: {
        javascript: {
          overrideStrict: 'non-strict',
        },
      },
    },
  };
  ```

#### module.parser.javascript.reexportExportsPresence

Specifies the behavior of invalid export names in `\"export ... from ...\"`. This might be useful to disable during the migration from `\"export ... from ...\"` to `\"export type ... from ...\"` when reexporting types in TypeScript.

- Type: `'error' | 'warn' | 'auto' | false`
- Available: 5.62.0+
- Example:

  ```js
  module.exports = {
    module: {
      parser: {
        javascript: {
          reexportExportsPresence: 'error',
        },
      },
    },
  };
  ```

#### module.parser.javascript.url

Enable parsing of `new URL()` syntax.

- Type: `boolean = true` | `'relative'`
- Example:

  ```js
  module.exports = {
    module: {
      parser: {
        javascript: {
          url: false, // disable parsing of `new URL()` syntax
        },
      },
    },
  };
  ```

The `'relative'` value for `module.parser.javascript.url` is available since webpack <Badge text='5.23.0' />. When used, webpack would generate relative URLs for `new URL()` syntax, i.e., there's no base URL included in the result URL:

```html
<!-- with 'relative' -->
<img src="c43188443804f1b1f534.svg" />

<!-- without 'relative' -->
<img src="file:///path/to/project/dist/c43188443804f1b1f534.svg" />
```

1. This is useful for SSR (Server side rendering) when base URL is not known by server (and it saves a few bytes). To be identical it must also be used for the client build.
2. Also for static site generators, mini-css-plugin and html-plugin, etc. where server side rendering is commonly needed.

#### module.parser.javascript.parse

<Badge text="5.103.0+" />

Use a custom JavaScript parse function instead of webpack's built-in parser.

Return `ast`, `comments`, and `semicolons` to ensure webpack’s AST analysis works correctly.

- `ast` should be ESTree-compatible.
- `comments` is an array of ESTree comment nodes.
- `semicolons` is a set of positions where the parser inserted a semicolon.

- Type: `(code: string, options: ParseOptions) => ParseResult`
- Example:

  ```js
  module.exports = {
    module: {
      parser: {
        javascript: {
          parse: (code, options) => {
            const comments = [];
            const semicolons = new Set();
            const onInsertedSemicolon = (pos) => semicolons.add(pos);

            const parseOptions = {
              ...options,
              module: options.sourceType === 'module',
              loc: options.locations,
              onComment: options.comments ? comments : undefined,
              onInsertedSemicolon: options.semicolons
                ? onInsertedSemicolon
                : undefined,
            };

            const ast = meriyah.parse(code, parseOptions);
            return { ast, comments, semicolons };
          },
        },
      },
    },
  };
  ```

### module.parser.json

Configure options for json parser.

```js
module.exports = {
  module: {
    parser: {
      json: {
        // options
      },
    },
  },
};
```

### module.parser.json.exportsDepth

The depth of json dependency flagged as `exportInfo`. By default, it is set to `Infinity` in production mode, and `1` in development mode.

- Type: `number`
- Available: <Badge text='5.98.0+' />
- Example:

```js
module.exports = {
  module: {
    parser: {
      json: {
        // For example, for the following json
        // {
        //   "depth_1": {
        //     "depth_2": {
        //       "depth_3": "foo"
        //     }
        //   },
        //   "_depth_1": "bar"
        // }
        // when `exportsDepth: 1`, `depth_2` and `depth_3` will not be flagged as `exportInfo`.
        exportsDepth: 1,
      },
    },
  },
};
```

### module.parser.json.namedExports

Allow named exports for json of object type.

- Type: `boolean`
- Available: <Badge text='5.103.0+' />
- Example:

```js
module.exports = {
  module: {
    parser: {
      json: {
        // Example:
        // import { myField } from "./file.json";
        //
        // console.log(myField);
        namedExports: true,
      },
    },
  },
};
```

### module.parser.json.parse

Function to parser content and return JSON.

- Type: `((input: string) => Buffer | JsonValue)`
- Example:

```js
const json5 = require('json5');

module.exports = {
  module: {
    parser: {
      json: {
        parse: json5.parse,
      },
    },
  },
};
```

## module.noParse

`RegExp` `[RegExp]` `function(resource)` `string` `[string]`

Prevent webpack from parsing any files matching the given regular expression(s). Ignored files **should not** have calls to `import`, `require`, `define` or any other importing mechanism. This can boost build performance when ignoring large libraries.

`noParse` can be also used as a way to deliberately prevent expansion of all `import`, `require`, `define` etc. calls for cases when those calls are unreachable at runtime.
For example, when building a project for `'browser'` [target](/configuration/target/) and using a third-party library that was prebuilt for both browser and Node.js and it requires Node.js built-ins e.g. `require('os')`.

T> You may need to use `[\\/]` in regex to match `\` on Windows and `/` on Mac/Linux.

**webpack.config.js**

```javascript
module.exports = {
  //...
  module: {
    noParse: /jquery|lodash|src[\\/]vendor[\\/]somelib/,
  },
};
```

```javascript
module.exports = {
  //...
  module: {
    noParse: (content) =>
      /jquery|lodash|src[\\/]vendor[\\/]somelib/.test(content),
  },
};
```

## module.unsafeCache

`boolean` `function (module)`

Cache the resolution of module requests. There are a couple of defaults for `module.unsafeCache`:

- `false` if [`cache`](/configuration/cache) is disabled.
- `true` if [`cache`](/configuration/cache) is enabled and the module appears to come from node modules, `false` otherwise.

**webpack.config.js**

```javascript
module.exports = {
  //...
  module: {
    unsafeCache: false,
  },
};
```

## module.rules

`(Rule | undefined | null | false | "" | 0 | "...")[]`

An array of [Rules](#rule) which are matched to requests when modules are created. These rules can modify how the module is created. They can apply loaders to the module, or modify the parser.

As of webpack 5.87.0, falsy values such as `false`, `undefined`, `null` and `0` can be used to conditionally disable a rule.

## Rule

`object`

A Rule can be separated into three parts — Conditions, Results and nested Rules.

### Rule Conditions

There are two input values for the conditions:

1. The resource: An absolute path to the file requested. It's already resolved according to the [`resolve` rules](/configuration/resolve).

2. The issuer: An absolute path to the file of the module which requested the resource. It's the location of the import.

**Example:** When we `import './style.css'` within `app.js`, the resource is `/path/to/style.css` and the issuer is `/path/to/app.js`.

In a Rule the properties [`test`](#ruletest), [`include`](#ruleinclude), [`exclude`](#ruleexclude) and [`resource`](#ruleresource) are matched with the resource and the property [`issuer`](#ruleissuer) is matched with the issuer.

When using multiple conditions, all conditions must match.

W> Be careful! The resource is the _resolved_ path of the file, which means symlinked resources are the real path _not_ the symlink location. This is good to remember when using tools that symlink packages (like `npm link`), common conditions like `/node_modules/` may inadvertently miss symlinked files. Note that you can turn off symlink resolving (so that resources are resolved to the symlink path) via [`resolve.symlinks`](/configuration/resolve/#resolvesymlinks).

### Rule results

Rule results are used only when the Rule condition matches.

There are two output values of a Rule:

1. Applied loaders: An array of loaders applied to the resource.
2. Parser options: An options object which should be used to create the parser for this module.

These properties affect the loaders: [`loader`](#ruleloader), [`options`](#ruleoptions--rulequery), [`use`](#ruleuse).

For compatibility also these properties: [`query`](#ruleoptions--rulequery), [`loaders`](#ruleloaders).

The [`enforce`](#ruleenforce) property affects the loader category. Whether it's a normal, pre- or post- loader.

The [`parser`](#ruleparser) property affects the parser options.

## Nested rules

Nested rules can be specified under the properties [`rules`](#rulerules) and [`oneOf`](#ruleoneof).

These rules are evaluated only when the parent Rule condition matches. Each nested rule can contain its own conditions.

The order of evaluation is as follows:

1. The parent rule
2. [`rules`](#rulerules)
3. [`oneOf`](#ruleoneof)

## Rule.assert

A [`Condition`](#condition) that allows you to match the import assertion of a dependency and apply specific rules based on the assertion type.

**webpack.config.js**

```javascript
module.exports = {
  // ...
  module: {
    rules: [
      {
        // Handles imports with the assertion "assert { type: 'json' }"
        assert: { type: 'json' },
        loader: require.resolve('./loader-assert.js'),
      },
    ],
  },
};
```

**index.js**

```javascript
import one from './pkg-1.json' assert { type: 'json' };
```

In this example, `Rule.assert` is used to apply `loader-assert.js` to any module imported with the assertion `assert { type: "json" }`, ensuring that JSON files are processed correctly.

## Rule.compiler

A [`Condition`](#condition) that allows you to match the child compiler name.

**webpack.config.js**

```javascript
module.exports = {
  // ...
  name: 'compiler',
  module: {
    rules: [
      {
        test: /a\.js$/,
        compiler: 'compiler', // Matches the "compiler" name, loader will be applied
        use: './loader',
      },
      {
        test: /b\.js$/,
        compiler: 'other-compiler', // Does not match the "compiler" name, loader will NOT be applied
        use: './loader',
      },
    ],
  },
};
```

## Rule.enforce

`string`

Possible values: `'pre' | 'post'`

Specifies the category of the loader. No value means normal loader.

There is also an additional category "inlined loader" which are loaders applied inline of the import/require.

There are two phases that all loaders enter one after the other:

1. **Pitching** phase: the pitch method on loaders is called in the order `post, inline, normal, pre`. See [Pitching Loader](/api/loaders/#pitching-loader) for details.
2. **Normal** phase: the normal method on loaders is executed in the order `pre, normal, inline, post`. Transformation on the source code of a module happens in this phase.

All normal loaders can be omitted (overridden) by prefixing `!` in the request.

All normal and pre loaders can be omitted (overridden) by prefixing `-!` in the request.

All normal, post and pre loaders can be omitted (overridden) by prefixing `!!` in the request.

```javascript
// Disable normal loaders
import { a } from '!./file1.js';

// Disable preloaders and normal loaders
import { b } from '-!./file2.js';

// Disable all loaders
import { c } from '!!./file3.js';
```

Inline loaders and `!` prefixes should not be used as they are non-standard. They may be used by loader generated code.

## Rule.exclude

Exclude all modules matching any of these conditions. If you supply a `Rule.exclude` option, you cannot also supply a `Rule.resource`. See [`Rule.resource`](#ruleresource) and [`Condition.exclude`](#condition) for details.

## Rule.include

Include all modules matching any of these conditions. If you supply a `Rule.include` option, you cannot also supply a `Rule.resource`. See [`Rule.resource`](#ruleresource) and [`Condition.include`](#condition) for details.

## Rule.issuer

A [`Condition`](#condition) to match against the module that issued the request. In the following example, the `issuer` for the `a.js` request would be the path to the `index.js` file.

**index.js**

```javascript
import A from './a.js';
```

This option can be used to apply loaders to the dependencies of a specific module or set of modules.

## Rule.issuerLayer

Allows to filter/match by layer of the issuer.

**webpack.config.js**

```js
module.exports = {
  // ...
  module: {
    rules: [
      {
        issuerLayer: 'other-layer',
      },
    ],
  },
};
```

## Rule.layer

`string`

Specify the layer in which the module should be placed in. A group of modules could be united in one layer which could then be used in [split chunks](/plugins/split-chunks-plugin/#splitchunkslayer), [stats](/configuration/stats/#statsgroupmodulesbylayer) or [entry options](/configuration/entry-context/#entry-descriptor).

**webpack.config.js**

```js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /module-layer-change/,
        layer: 'layer',
      },
    ],
  },
};
```

## Rule.extractSourceMap

`boolean = false`

Extracts existing source map data from files (from their `//# sourceMappingURL` comment), useful for preserving the source maps of third-party libraries.

**webpack.config.js**

```js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.m?js$/,
        extractSourceMap: true,
      },
    ],
  },
};
```

## Rule.loader

`Rule.loader` is a shortcut to `Rule.use: [ { loader } ]`. See [`Rule.use`](#ruleuse) and [`UseEntry.loader`](#useentry) for details.

## Rule.loaders

W> This option is **deprecated** in favor of `Rule.use`.

`Rule.loaders` is an alias to `Rule.use`. See [`Rule.use`](#ruleuse) for details.

## Rule.mimetype

You can match config rules to data uri with `mimetype`.

**webpack.config.js**

```js
module.exports = {
  // ...
  module: {
    rules: [
      {
        mimetype: 'application/json',
        type: 'json',
      },
    ],
  },
};
```

`application/json`, `text/javascript`, `application/javascript`, `application/node` and `application/wasm` are already included by default as mimetype.

## Rule.oneOf

An array of [`Rules`](#rule) from which only the first matching Rule is used when the Rule matches.

**webpack.config.js**

```javascript
module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.css$/,
        oneOf: [
          {
            resourceQuery: /inline/, // foo.css?inline
            type: 'asset/inline',
          },
          {
            resourceQuery: /external/, // foo.css?external
            type: 'asset/resource',
          },
        ],
      },
    ],
  },
};
```

T> See [`Nested rules`](#nested-rules) for more information.

## Rule.options / Rule.query

`Rule.options` and `Rule.query` are shortcuts to `Rule.use: [ { options } ]`. See [`Rule.use`](#ruleuse) and [`UseEntry.options`](#useentry) for details.

W> `Rule.query` is deprecated in favor of `Rule.options` and `UseEntry.options`.

## Rule.parser

An object with parser options. All applied parser options are merged.

Parsers may inspect these options and disable or reconfigure themselves accordingly. Most of the default plugins interpret the values as follows:

- Setting the option to `false` disables the parser.
- Setting the option to `true` or leaving it `undefined` enables the parser.

However, parser plugins may accept more than only a boolean. For example, the internal `NodeStuffPlugin` can accept an object instead of `true` to add additional options for a particular Rule.

**Examples** (parser options by the default plugins):

```js
module.exports = {
  //...
  module: {
    rules: [
      {
        //...
        parser: {
          amd: false, // disable AMD
          commonjs: false, // disable CommonJS
          system: false, // disable SystemJS
          harmony: false, // disable ES2015 Harmony import/export
          requireInclude: false, // disable require.include
          requireEnsure: false, // disable require.ensure
          requireContext: false, // disable require.context
          browserify: false, // disable special handling of Browserify bundles
          requireJs: false, // disable requirejs.*
          node: false, // disable __dirname, __filename, module, require.extensions, require.main, etc.
          commonjsMagicComments: false, // disable magic comments support for CommonJS
          node: {}, // reconfigure node layer on module level
          worker: ['default from web-worker', '...'], // Customize the WebWorker handling for javascript files, "..." refers to the defaults.
        },
      },
    ],
  },
};
```

If `Rule.type` is an `asset` then `Rules.parser` option may be an object or a function that describes a condition whether to encode file contents to Base64 or emit it as a separate file into the output directory.

If `Rule.type` is an `asset` or `asset/inline` then `Rule.generator` option may be an object that describes the encoding of the module source or a function that encodes module's source by a custom algorithm.

See [Asset Modules guide](/guides/asset-modules/) for additional information and use cases.

## Rule.parser.dataUrlCondition

`object = { maxSize number = 8096 }` `function (source, { filename, module }) => boolean`

If a module source size is less than `maxSize` then module will be injected into the bundle as a Base64-encoded string, otherwise module file will be emitted into the output directory.

**webpack.config.js**

```js
module.exports = {
  //...
  module: {
    rules: [
      {
        //...
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024,
          },
        },
      },
    ],
  },
};
```

When a function is given, returning `true` tells webpack to inject the module into the bundle as Base64-encoded string, otherwise module file will be emitted into the output directory.

**webpack.config.js**

```js
module.exports = {
  //...
  module: {
    rules: [
      {
        //...
        parser: {
          dataUrlCondition: (source, { filename, module }) => {
            const content = source.toString();
            return content.includes('some marker');
          },
        },
      },
    ],
  },
};
```

## Rule.generator

### Rule.generator.dataUrl

`object = { encoding string = 'base64' | false, mimetype string = undefined | false }` `function (content, { filename, module }) => string`

When `Rule.generator.dataUrl` is used as an object, you can configure two properties:

- encoding: When set to `'base64'`, module source will be encoded using Base64 algorithm. Setting `encoding` to false will disable encoding.
- mimetype: A mimetype for data URI. Resolves from module resource extension by default.

**webpack.config.js**

```js
module.exports = {
  //...
  module: {
    rules: [
      {
        //...
        generator: {
          dataUrl: {
            encoding: 'base64',
            mimetype: 'mimetype/png',
          },
        },
      },
    ],
  },
};
```

When used as a function, it executes for every module and must return a data URI string.

```js
module.exports = {
  //...
  module: {
    rules: [
      {
        //...
        generator: {
          dataUrl: (content) => {
            const svgToMiniDataURI = require('mini-svg-data-uri');
            if (typeof content !== 'string') {
              content = content.toString();
            }
            return svgToMiniDataURI(content);
          },
        },
      },
    ],
  },
};
```

### Rule.generator.emit

Opt out of writing assets from [Asset Modules](/guides/asset-modules/), you might want to use it in Server side rendering cases.

- Type: `boolean = true`
- Available: <Badge text='5.25.0+' />
- Example:

  ```js
  module.exports = {
    // …
    module: {
      rules: [
        {
          test: /\.png$/i,
          type: 'asset/resource',
          generator: {
            emit: false,
          },
        },
      ],
    },
  };
  ```

### Rule.generator.filename

The same as [`output.assetModuleFilename`](/configuration/output/#outputassetmodulefilename) but for specific rule. Overrides `output.assetModuleFilename` and works only with `asset` and `asset/resource` module types.

**webpack.config.js**

```js
module.exports = {
  //...
  output: {
    assetModuleFilename: 'images/[hash][ext][query]',
  },
  module: {
    rules: [
      {
        test: /\.png$/,
        type: 'asset/resource',
      },
      {
        test: /\.html$/,
        type: 'asset/resource',
        generator: {
          filename: 'static/[hash][ext]',
        },
      },
    ],
  },
};
```

### Rule.generator.publicPath

Customize `publicPath` for specific Asset Modules.

- Type: `string | ((pathData: PathData, assetInfo?: AssetInfo) => string)`
- Available: <Badge text='5.28.0+' />

```js
module.exports = {
  //...
  output: {
    publicPath: 'static/',
  },
  module: {
    rules: [
      {
        test: /\.png$/i,
        type: 'asset/resource',
        generator: {
          publicPath: 'assets/',
        },
      },
    ],
  },
};
```

### Rule.generator.outputPath

Emit the asset in the specified folder relative to 'output.path'. This should only be needed when custom 'publicPath' is specified to match the folder structure there.

- Type: `string | ((pathData: PathData, assetInfo?: AssetInfo) => string)`
- Available: <Badge text='5.67.0+' />

```js
module.exports = {
  //...
  output: {
    publicPath: 'static/',
  },
  module: {
    rules: [
      {
        test: /\.png$/i,
        type: 'asset/resource',
        generator: {
          publicPath: 'https://cdn/assets/',
          outputPath: 'cdn-assets/',
        },
      },
    ],
  },
};
```

## Rule.resource

A [`Condition`](#condition) matched with the resource. See details in [`Rule` conditions](#rule-conditions).

## Rule.resourceQuery

A [`Condition`](#condition) matched with the resource query. This option is used to test against the query section of a request string (i.e. from the question mark onwards). If you were to `import Foo from './foo.css?inline'`, the following condition would match:

**webpack.config.js**

```javascript
module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.css$/,
        resourceQuery: /inline/,
        type: 'asset/inline',
      },
    ],
  },
};
```

## Rule.parser.parse

`function(input) => string | object`

If `Rule.type` is set to `'json'` then `Rules.parser.parse` option may be a function that implements custom logic to parse module's source and convert it to a JavaScript `object`. It may be useful to import `toml`, `yaml` and other non-JSON files as JSON, without specific loaders:

**webpack.config.js**

```javascript
const toml = require('toml');

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.toml/,
        type: 'json',
        parser: {
          parse: toml.parse,
        },
      },
    ],
  },
};
```

## Rule.rules

An array of [`Rules`](#rule) that is also used when the Rule matches.

T> See [`Nested rules`](#nested-rules) for more information.

## Rule.scheme

Match the used schema, e.g., `data`, `http`.

- Type: `string | RegExp | ((value: string) => boolean) | RuleSetLogicalConditions | RuleSetCondition[]`
- Available: <Badge text='5.38.0+' />

**webpack.config.js**

```js
module.exports = {
  module: {
    rules: [
      {
        scheme: 'data',
        type: 'asset/resource',
      },
    ],
  },
};
```

## Rule.sideEffects

`bool`

Indicate what parts of the module contain side effects. See [Tree Shaking](/guides/tree-shaking/#mark-the-file-as-side-effect-free) for details.

## Rule.test

Include all modules that pass test assertion. If you supply a `Rule.test` option, you cannot also supply a `Rule.resource`. See [`Rule.resource`](#ruleresource) and [`Condition`](#condition) for details.

## Rule.type

`string`

Possible values: `'javascript/auto' | 'javascript/dynamic' | 'javascript/esm' | 'json' | 'webassembly/sync' | 'webassembly/async' | 'asset' | 'asset/source' | 'asset/resource' | 'asset/inline' | 'asset/bytes' | 'css' | 'css/auto' | 'css/module' | 'css/global'`

`Rule.type` sets the type for a matching module. This prevents defaultRules and their default importing behaviors from occurring. For example, if you want to load a `.json` file through a custom loader, you'd need to set the `type` to `javascript/auto` to bypass webpack's built-in json importing.

**webpack.config.js**

```javascript
module.exports = {
  //...
  module: {
    rules: [
      //...
      {
        test: /\.json$/,
        type: 'javascript/auto',
        loader: 'custom-json-loader',
      },
    ],
  },
};
```

> See [Asset Modules guide](/guides/asset-modules/) for more about `asset*` type.

### css/auto

<Badge text="5.87.0+" />

See use case of `css/auto` module type [here](https://github.com/webpack/webpack/issues/16572). Make sure to enable [`experiments.css`](/configuration/experiments/#experimentscss) to use `css/auto`.

```js
module.exports = {
  target: 'web',
  mode: 'development',
  experiments: {
    css: true,
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: 'less-loader',
        type: 'css/auto',
      },
    ],
  },
};
```

## Rule.use

`[UseEntry]` `function(info)`

Starting with webpack 5.87.0 falsy values such as `undefined` `null` can be used to conditionally disable specific use entry.

**`[UseEntry]`**

`Rule.use` can be an array of [UseEntry](#useentry) which are applied to modules. Each entry specifies a loader to be used.

Passing a string (i.e. `use: [ 'style-loader' ]`) is a shortcut to the loader property (i.e. `use: [ { loader: 'style-loader '} ]`).

Loaders can be chained by passing multiple loaders, which will be applied from right to left (last to first configured).

**webpack.config.js**

```javascript
module.exports = {
  //...
  module: {
    rules: [
      {
        //...
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            },
          },
          {
            loader: 'less-loader',
            options: {
              noIeCompat: true,
            },
          },
        ],
      },
    ],
  },
};
```

**`function(info)`**

`Rule.use` can also be a function which receives the object argument describing the module being loaded, and must return an array of `UseEntry` items.

The `info` object parameter has the following fields:

- `compiler`: The current webpack compiler (can be undefined)
- `issuer`: The path to the module that is importing the module being loaded
- `realResource`: Always the path to the module being loaded
- `resource`: The path to the module being loaded, it is usually equal to `realResource` except when the resource name is overwritten via `!=!` in request string

The same shortcut as an array can be used for the return value (i.e. `use: [ 'style-loader' ]`).

**webpack.config.js**

```javascript
module.exports = {
  //...
  module: {
    rules: [
      {
        use: (info) => [
          {
            loader: 'custom-svg-loader',
          },
          {
            loader: 'svgo-loader',
            options: {
              plugins: [
                {
                  cleanupIDs: {
                    prefix: basename(info.resource),
                  },
                },
              ],
            },
          },
        ],
      },
    ],
  },
};
```

See [UseEntry](#useentry) for details.

## Rule.resolve

W> `Rule.resolve` is Available since webpack 4.36.1

Resolving can be configured on module level. See all available options on [resolve configuration page](/configuration/resolve/#resolve).
All applied resolve options get deeply merged with higher level [resolve](/configuration/resolve/#resolve).

For example, let's imagine we have an entry in `./src/index.js`, `./src/footer/default.js` and a `./src/footer/overridden.js` to demonstrate the module level resolve.

**./src/index.js**

```javascript
import footer from 'footer';
console.log(footer);
```

**./src/footer/default.js**

```javascript
export default 'default footer';
```

**./src/footer/overridden.js**

```javascript
export default 'overridden footer';
```

**webpack.js.org**

```javascript
module.exports = {
  resolve: {
    alias: {
      footer: './footer/default.js',
    },
  },
};
```

When creating a bundle with this configuration, `console.log(footer)` will output 'default footer'. Let's set `Rule.resolve` for `.js` files, and alias `footer` to `overridden.js`.

**webpack.js.org**

```javascript
module.exports = {
  resolve: {
    alias: {
      footer: './footer/default.js',
    },
  },
  module: {
    rules: [
      {
        resolve: {
          alias: {
            footer: './footer/overridden.js',
          },
        },
      },
    ],
  },
};
```

When creating a bundle with updated configuration, `console.log(footer)` will output 'overridden footer'.

### resolve.fullySpecified

`boolean = true`

When enabled, you should provide the file extension when `import`ing a module in `.mjs` files or any other `.js` files when their nearest parent `package.json` file contains a `"type"` field with a value of `"module"`, otherwise webpack would fail the compiling with a `Module not found` error. And webpack won't resolve directories with filenames defined in the [`resolve.mainFiles`](/configuration/resolve/#resolvemainfiles), you have to specify the filename yourself.

**webpack.config.js**

```js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.m?js$/,
        resolve: {
          fullySpecified: false, // disable the behaviour
        },
      },
    ],
  },
};
```

W> `resolve.fullySpecified` doesn't affect requests from [mainFields](/configuration/resolve/#resolvemainfields), [aliasFields](/configuration/resolve/#resolvealiasfields) or [aliases](/configuration/resolve/#resolvealias).

## Rule.with

<Badge text="v5.92.0+" />

A [`Condition`](#condition) that allows you to match the imports based on specific conditions provided with the `with` keyword, enabling different rules to be applied based on the content type.

**webpack.config.js**

```javascript
module.exports = {
  // ...
  module: {
    rules: [
      {
        // Handles imports with the condition "with { type: 'json' }"
        with: { type: 'json' },
        loader: require.resolve('./loader-assert.js'),
      },
    ],
  },
};
```

**index.js**

```javascript
import one from './pkg-1.json' with { type: 'json' };
```

In this example, `Rule.with` is used to apply `loader-assert.js` to any module imported with the condition `with { type: "json" }`.

## Condition

Conditions can be one of these:

- A string: To match the input must start with the provided string. I. e. an absolute directory path, or absolute path to the file.
- A RegExp: It's tested with the input.
- A function: It's called with the input and must return a truthy value to match.
- An array of Conditions: At least one of the Conditions must match.
- An object: All properties must match. Each property has a defined behavior.

`{ and: [Condition] }`: All Conditions must match.

`{ or: [Condition] }`: Any Condition must match.

`{ not: [Condition] }`: All Conditions must NOT match.

**Example:**

```javascript
const path = require('path');

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.css$/,
        include: [
          // will include any paths relative to the current directory starting with `app/styles`
          // e.g. `app/styles.css`, `app/styles/styles.css`, `app/stylesheet.css`
          path.resolve(__dirname, 'app/styles'),
          // add an extra slash to only include the content of the directory `vendor/styles/`
          path.join(__dirname, 'vendor/styles/'),
        ],
      },
    ],
  },
};
```

## UseEntry

`object` `function(info)`

**`object`**

It must have a `loader` property being a string. It is resolved relative to the configuration [`context`](/configuration/entry-context/#context) with the loader resolving options ([resolveLoader](/configuration/resolve/#resolveloader)).

It can have an `options` property being a string or object. This value is passed to the loader, which should interpret it as loader options.

For compatibility a `query` property is also possible, which is an alias for the `options` property. Use the `options` property instead.

Note that webpack needs to generate a unique module identifier from the resource and all loaders including options. It tries to do this with a `JSON.stringify` of the options object. This is fine in 99.9% of cases, but may be not unique if you apply the same loaders with different options to the resource and the options have same stringified values.

It also breaks if the options object cannot be stringified (i.e. circular JSON). Because of this you can have a `ident` property in the options object which is used as unique identifier.

**webpack.config.js**

```javascript
module.exports = {
  //...
  module: {
    rules: [
      {
        loader: 'css-loader',
        options: {
          modules: true,
        },
      },
    ],
  },
};
```

**`function(info)`**

A `UseEntry` can also be a function which receives the object argument describing the module being loaded, and must return a non-function `UseEntry` object. This can be used to vary the loader options on a per-module basis.

The `info` object parameter has the following fields:

- `compiler`: The current webpack compiler (can be undefined)
- `issuer`: The path to the module that is importing the module being loaded
- `realResource`: Always the path to the module being loaded
- `resource`: The path to the module being loaded, it is usually equal to `realResource` except when the resource name is overwritten via `!=!` in request string

**webpack.config.js**

```javascript
module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.svg$/,
        type: 'asset',
        use: (info) => ({
          loader: 'svgo-loader',
          options: {
            plugins: [
              {
                cleanupIDs: { prefix: basename(info.resource) },
              },
            ],
          },
        }),
      },
    ],
  },
};
```

## Module Contexts

These options describe the default settings for the context created when a dynamic dependency is encountered.

Example for an `unknown` dynamic dependency: `require`.

Example for an `expr` dynamic dependency: `require(expr)`.

Example for an `wrapped` dynamic dependency: `require('./templates/' + expr)`.

Here are the available options with their [defaults](https://github.com/webpack/webpack/blob/main/lib/config/defaults.js):

**webpack.config.js**

```javascript
module.exports = {
  //...
  module: {
    exprContextCritical: true,
    exprContextRecursive: true,
    exprContextRegExp: false,
    exprContextRequest: '.',
    unknownContextCritical: true,
    unknownContextRecursive: true,
    unknownContextRegExp: false,
    unknownContextRequest: '.',
    wrappedContextCritical: false,
    wrappedContextRecursive: true,
    wrappedContextRegExp: /.*/,
    strictExportPresence: false,
  },
};
```

T> You can use the `ContextReplacementPlugin` to modify these values for individual dependencies. This also removes the warning.

A few use cases:

- Warn for dynamic dependencies: `wrappedContextCritical: true`.
- `require(expr)` should include the whole directory: `exprContextRegExp: /^\.\//`
- `require('./templates/' + expr)` should not include subdirectories by default: `wrappedContextRecursive: false`
- `strictExportPresence` makes missing exports an error instead of warning
- Set the inner regular expression for partial dynamic dependencies : `wrappedContextRegExp: /\\.\\*/`

W> `strictExportPresence` is deprecated in favor of [`exportsPresence`](#moduleparserjavascriptexportspresence) option.
